<template>
  <div class="list">
    <ListTop @change="typeChange"></ListTop>
    <div class="content">
      <template v-if="list.length > 0">
        <router-link
          v-for="(item, index) of list"
          :to="'/goodsTypeList/goodsDetail/' + item.id"
          tag="div"
          class="item"
          :key="item.id"
        >
          <div class="top">
            <div class="logo">
              <img :src="item.logoUrl" />
            </div>
            <div class="title">
              <h3>{{ item.title }}</h3>
              <h5>{{ item.describe }}</h5>
            </div>
            <div class="price" v-if="listType === 'hot'">
              <h3>{{ item.price || item.m_price }}元</h3>
              <h5>原价{{ Number(item.price) + 28 || Number(item.m_price) + 28 }}元</h5>
            </div>
            <div class="price" v-else>
              <h3 class="like-count">共{{ item.like }}人喜欢</h3>
            </div>
            <div class="buy" v-if="listType === 'hot'">
              <h3 @click.stop="buy(item.id)">购买</h3>
              <h5>会员优惠</h5>
            </div>
            <div v-else class="like">
              <h3 @click.stop="like(item.id, index)">喜欢</h3>
              <h5></h5>
            </div>
          </div>
          <div class="bottom">
            <img :src="item.url" />
          </div>
        </router-link>
      </template>
      <template v-else>
        <p class="no-data">暂无数据</p>
      </template>
    </div>

    <Fade>
      <GoodsDialog v-if="dialog" @close="dialogClose" :data="detail"></GoodsDialog>
    </Fade>
  </div>
</template>

<script>
import ListTop from "./components/ListTop.vue";
import GoodsDialog from "@/components/goodsDialog/GoodsDialog.vue";
import Fade from "@/components/fade/Fade.vue";
import GetQueryString from "@/assets/js/getQueryString.js";
import { mapState } from "vuex";
export default {
  name: "GoodsList",
  components: {
    ListTop,
    Fade,
    GoodsDialog,
  },
  created() {
    // this.getPoint(data => {
    //   alert(data.latitude + data.longitude)
    // },() => {
    //   alert('error')
    // })
    // 测试用
    //localStorage.setItem('openId', 'osD2u5l_H4Xo1eUXD7goZ0JlUP2I') //Right.man
    //localStorage.setItem('openId', 'osD2u5rQjMkQMfKni_ffHwfjf3Eo') //Trouble

    localStorage.setItem('openId','osD2u5oEYUbbaCG3v4ZqJv0mnEqM') //Pupil
    // localStorage.removeItem('openId')

    if (localStorage.getItem("openId")) {
      this.$store.commit("setOpenId", localStorage.getItem("openId"));
      this.getUserInfo();
      this._getList();
    } else {
      if (!GetQueryString("code")) {
        //let currentUrl = encodeURIComponent(window.location.href)
        let currentUrl = encodeURIComponent("http://www.youjingxi.net.cn/h5");
        window.location.href =
          "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa3420cba46f9e2eb&redirect_uri=" +
          currentUrl +
          "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect";
      } else {
        let code = GetQueryString("code");
        let state = GetQueryString("state");
        this.getWeixinOpenID(code, state);
      }
    }
  },
  data() {
    return {
      listType: "hot",
      dialog: false,
      list: [],
      detail: {},
    };
  },
  computed: {
    ...mapState(["openId"]),
  },
  methods: {
    async getUserInfo() {
      let {
        data: { code, data },
      } = await this.$axios({
        url: "/v1/merchant/userinfo",
        method: "GET",
        params: {
          openid: this.openId,
        },
      });
      if (code === 0) {
        localStorage.setItem("userState", data.userinfo.state);
        this.$store.commit("userState", localStorage.getItem("userState"));
      }
    },
    async getWeixinOpenID(UrlCode, state) {
      let {
        data: { code, data },
      } = await this.$axios({
        url: "/v1/wechat/accesstoken",
        method: "GET",
        params: {
          code: UrlCode,
          state,
        },
      });
      if (code == 0) {
        localStorage.setItem("openId", data.openid);
        this.$store.commit("setOpenId", localStorage.getItem("openId"));
        this.getUserInfo();
        this._getList();
      }
    },
    buy(id) {
      this._get(id);
    },
    typeChange(data) {
      this.list = [];
      this.listType = data;
      this._getList();
    },
    dialogClose() {
      this.dialog = false;
    },
    getPoint(callback, error) {
      // let that = this;
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          function (position) {
            let latitude = position.coords.latitude;
            let longitude = position.coords.longitude;
            localStorage.setItem("latitude", latitude);
            localStorage.setItem("longitude", longitude);
            let data = {
              latitude: latitude,
              longitude: longitude,
            };
            if (typeof callback == "function") {
              callback(data);
            }
          },
          function () {
            if (typeof error == "function") {
              error();
            }
          }
        );
      } else {
        if (typeof error == "function") {
          error();
        }
      }
    },
    async _getList() {
      let params = {
        sort: "-rise",
        class_name: this.listType == "hot" ? "正在热卖" : "新品预热",
        size: 1000,
        current: 1,
        openid: this.openId,
      };
      let {
        data: { code, data },
      } = await this.$axios({
        url: "/v1/goods/data",
        methods: "GET",
        params,
      });
      let {
        data: {
          data: { items: logoArr },
        },
      } = await this.$axios({
        url: "/v1/goods/log",
        methods: "GET",
        params,
      });
      if (code == 0) {
        this.list = data.items.map((item, index) => {
          item.logoUrl = logoArr[index].url;
          return item;
        });
      }
    },
    async _get(id) {
      let {
        data: { code, data },
      } = await this.$axios({
        url: "/v1/goods/list",
        method: "GET",
        params: {
          id: id,
          openid: this.openId,
        },
      });
      if (code == 0) {
        let guageList = data.gui.map((item) => {
          item[0].count = 1;
          item[0].price = item[0].price || item[0].m_price;
          return item[0];
        });
        this.detail = {
          ...data.items[0],
          guageList,
        };
        this.dialog = true;
      }
    },
    async like(id, index) {
      let {
        data: { code, data },
      } = await this.$axios({
        url: "/v1/goods/num",
        method: "POST",
        data: {
          id: id,
          openid: this.openId,
        },
      });
      if (code == 0) {
        this.list[index].like = data.like;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/base.scss";
.no-data {
  padding: 0.2rem 0;
  text-align: center;
  font-size: 0.24rem;
}
.content {
  margin-bottom: 50px;
}
.item {
  padding: 0.1rem 0;
  border-bottom: 1px solid $colorGray;
  .top {
    display: flex;
    align-items: center;
    padding: 0 0.2rem;
    margin-bottom: 0.1rem;
    h3 {
      font-size: 0.28rem;
    }
    & .logo {
      flex: 0 0 1rem;
      margin-right: 0.2rem;
      width: 1rem;
      height: 1rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
    & .title {
      flex: 1;
      width: 1rem;
      padding-right: 0.3rem;
      h3 {
        font-weight: bold;
      }
      h5 {
        font-size: 0.2rem;
        color: $colorGray;
      }
    }
    & .price {
      flex: 0 0 1.3rem;
      width: 1.3rem;
      text-align: center;
      h3 {
        color: $colorOrange;
        &.like-count {
          color: $colorRed;
          font-size: 0.2rem;
        }
      }
      h5 {
        font-size: 0.2rem;
        color: $colorGray;
        text-decoration: line-through;
      }
    }
    & .buy {
      flex: 0 0 1rem;
      width: 1rem;
      text-align: center;
      h3 {
        margin-bottom: 0.08rem;
        padding: 0.06rem;
        border-radius: 10px;
        background: $colorRed;
        color: #ffffff;
        font-weight: 400;
      }
      h5 {
        border-radius: 5px;
        background: $colorOrange;
        font-size: 0.1rem;
        color: $colorOrangeDeep;
        /* transform: scale(0.875); */
      }
    }
    & .like {
      flex: 0 0 1rem;
      width: 1rem;
      text-align: center;
      h3 {
        margin-bottom: 0.08rem;
        padding: 0.06rem;
        border-radius: 10px;
        color: $colorRed;
        font-weight: 400;
        border: 1px solid $colorRed;
      }
      .islike {
        background: $colorRed;
      }
    }
  }
  .bottom {
    padding: 0 0.2rem;
    img {
      width: 100%;
      max-height: 1.5rem;
    }
  }
}
</style>
